<template>
  <div class="keepDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">存酒详情</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">状态：<b :class="[stateTextClass]" v-text="stateText"></b></span>
      </div>
    </card>
    <group label-width="6em">
      <cell title="存酒编号" class="number" :value="keepDetailInfo.NUMBER"></cell>
      <cell title="客户名称" :value="keepDetailInfo.CUSTOMER_NAME?keepDetailInfo.CUSTOMER_NAME + '(手机：' + keepDetailInfo.PHONE + ')':'' + '(手机：' + keepDetailInfo.PHONE + ')'"></cell>
      <cell title="存酒时间" :value="keepDetailInfo.DATETIME"></cell>
      <cell title="存酒人" :value="keepDetailInfo.KEEPER + ' - ' + keepDetailInfo.keeper_DEPARTMENT"></cell>
      <cell title="备注" :value="keepDetailInfo.REMARK"></cell>
    </group>
    <group title="存酒明细" class="keepDetaillist">
      <cell-box v-for="(item,index) in keepDetailInfo.detailList" :key="index">
        <div class="item">
          <h4 class="title">
            <span v-text="item.NAME"></span>
          </h4>
          <div class="info">
            (<span v-text="'单价：¥ '+ formatCurrency(item.PRICE) +'元'"></span>，
            <span v-text="item.QUANTITY + item.UNIT"></span>，<span style="color: #0086b3;" v-if="item.WHOLE == 1">整支</span>
            <span style="color: #0abd39;" v-if="item.WHOLE == 0">单支，剩余：<span v-text="item.SCALE"></span>CM</span>)
          </div>
          <div class="expire">
            过期时间：<span v-text="item.EXPIRE_DATETIME"></span>
            <span class="closeExpired" v-text="checkExpired(item.EXPIRE_DATETIME)"></span>
          </div>
          <span class="state keeping" v-if="item.STATE == 0">存放中</span>
          <span class="state drawed" v-if="item.STATE == 1">已取出</span>
          <span class="state expired" v-if="item.STATE == 2">过期</span>
          <span class="state withdrawing" v-if="item.STATE == 3">存放中</span>
        </div>
      </cell-box>
    </group>
    <group-title>(温馨提示：存酒如过期时间前未被取出，将被充公处理，请尽快享用)</group-title>
    <br/>
  </div>
</template>

<script>
  import { GroupTitle, Group, Cell, CellBox, Card, numberComma, dateFormat } from 'vux'
  import {getKeepDetail} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'keepDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramKeepId:this.$route.params.keepId,
        keepDetailInfo:{},
        stateText:'',
        stateClass:'',
        stateTextClass:''
      }
    },
    components:{
      GroupTitle,
      Group,
      Cell,
      CellBox,
      Card
    },
    computed:{

    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      getState(state){
        switch (state) {
          case 0://this.stateText = '检查中';this.stateClass = 'icon-jianchaxiang';this.stateTextClass = 'checking';break
          case 1:this.stateText = '存酒中';this.stateClass = 'icon-jiu1';this.stateTextClass = 'keeping';break
          case 2:this.stateText = '存酒完成';this.stateClass = 'icon-oksign';this.stateTextClass = 'success';break
          case 3:this.stateText = '存酒失败';this.stateClass = 'icon-shibai';this.stateTextClass = 'fail';break
          default:this.stateText = '无';this.stateClass = '';this.stateTextClass = '';break
        }
      },
      checkExpired(datatime){
        let theDateTime = new Date(dateFormat(new Date(datatime), 'YYYY-MM-DD')),nowDateTime = new Date(dateFormat(new Date(), 'YYYY-MM-DD'))
        if(nowDateTime.getTime() >= theDateTime.getTime())
          return '（已过期）'
        else if(nowDateTime.getTime() + 1000*3600*24*5 > theDateTime.getTime())
          return '（即将过期）'
        else return ''
      }
    },
    mounted(){
      getKeepDetail(this.paramKeepId).then((res)=>{
        if(res.status == 'success'){
          this.keepDetailInfo = res.data
          this.getState(res.data.STATE)
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getKeepDetail error info:', res.msg)
        }
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getKeepDetail catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .keepDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.checking{color: #ffd428;}
        &.keeping{color: #2775bd;}
        &.success{color: #0abd39;}
        &.fail{color: #ff3728;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.checking{color: #ffd428;}
          &.keeping{color: #2775bd;}
          &.success{color: #0abd39;}
          &.fail{color: #ff3728;}
        }
      }
    }
    .keepDetaillist{
      .item{
        font-size:1rem;display: block;padding:0.4rem 0;line-height: 1.3rem;width:100%;position: relative;
        .title{width:75%;margin-bottom: 0.6rem;font-size:1rem; }
        .info{margin-bottom: 0.4rem;font-size:0.9rem;}
        .expire{
          color: #707070;font-size:0.9rem;
          .closeExpired{color:red;}
        }
        .state{
          font-size:0.9rem;padding:0.1rem 0.6rem;color:#fff;border-radius: 0.3rem;position: absolute;right:0;top:0.3rem;
          &.keeping{background: #45cd4e;}
          &.drawed{background: #8c939d;}
          &.expired{background: #ff0300;}
          &.withdrawing{background: #2775bd;}
        }
      }
    }
  }
</style>
